<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_pqm82v7ytg.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
            overflow: hidden;
        }

        .wrap .dotBar {
            position: absolute;
            right: 50px;
            bottom: 20px;
            display: flex;
            text-align: center;
            line-height: 45px;
            z-index: 999;
        }

        .wrap .dotBar li {
            flex: 1;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff;
            border: 2px solid hsla(0, 0%, 100%, .3);
            font-size: 0;
            margin: 0 4px;
        }

        .wrap .dotBar li:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        .wrap .dotBar .active {
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        .slideBar {
            /* width: 6130px; */
            /* 父元素的宽度 由子元素撑开 */
            width: max-content;
            overflow: hidden;
            position: relative;
        }

        .slideBar li {
            width: 1226px;
            background-color: #6ff;
            text-align: center;
            float: left;
        }

        .slideBar li img {
            width: 100%;
        }

        .slideBar .show {
            display: block;
        }

        .wrap:hover .left,
        .wrap:hover .right {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .wrap .left,
        .wrap .right {
            width: 60px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .wrap .iconfont {
            font-size: 40px;
        }

        .wrap .left {
            left: 0;
        }

        .wrap .right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- dot -->
        <div class="left"><i class="iconfont icon-left"></i></div>
        <div class="right"><i class="iconfont icon-right"></i></div>
        <ul class="dotBar">
            <li class="active">item_01</li>
            <li>item_02</li>
            <li>item_03</li>
            <li>item_04</li>
            <li>item_05</li>
        </ul>
        <ul class="slideBar">
            <li class="show"><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.webp" alt=""></li>
            <li><img src="../images/4.webp" alt=""></li>
            <li><img src="../images/5.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
        </ul>
    </div>
</body>
<script>
    // 无缝轮播

    // 点击轮播
    // 1. 谁滚动,如何滚动?   slideBar带动整个盒子, 因为要撑开父元素 => 占位置(relative)
    // 2. 图片 和 点 一一对应
    // 3. slideBar 滚动的位置和 图片的宽度以及下标对应   (下标为1 向左滚动一张)
    // 4. 向左滚动  => left负值

    var swiperWidth = $(".wrap").width();
    var index = 0; //全局变量 记录轮播的下标
    var timer = null;

    autoPlay();// 页面加载时，默认启动轮播

    // 点击轮播
    $(".dotBar li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        index = $(this).index();
        console.log($(".slideBar"));
        $(".slideBar").stop().animate({ left: -swiperWidth * index }, 500, function () {
            console.log("本次运动完毕");
        })
    })

    $(".wrap").mouseenter(function () {
        clearInterval(timer);
    }).mouseleave(function () {
        autoPlay();
    })

    $(".left").click(function () {
        index--;

        // 左键连点 => 不会触发回调函数 => 判断如果小于0(效果: 第一张=>第五张)  => 第一张同第六张(第一张切第六张 滚动到第五张)
        if (index < 0) {
            index = $(".dotBar li").length;
            $(".slideBar").stop().css({ left: -swiperWidth * index });
            index--;
        }
        var activeIndex = index >= $(".dotBar li").length ? 0 : index;
        $(".dotBar li").eq(activeIndex).addClass("active").siblings().removeClass("active");

        $(".slideBar").stop().animate({ left: -swiperWidth * index }, 500, function () {
            // console.log("本次运动完毕");
            // if (index >= $(".dotBar li").length) {
            //     $(".slideBar").css({ left: 0 });
            //     index = 0;
            // }
        })
    })

    $(".right").click(function () {
        index++;

        // 右键连点 => 不会触发回调函数 => 判断如果超出最后一张(第六张=>看起来同第一张)  => 切到第一张滚动到第二张
        if (index > $(".dotBar li").length) {
            index = 0;
            $(".slideBar").stop().css({ left: 0 });
            index++;
        }
        var activeIndex = index >= $(".dotBar li").length ? 0 : index;
        $(".dotBar li").eq(activeIndex).addClass("active").siblings().removeClass("active");

        $(".slideBar").stop().animate({ left: -swiperWidth * index }, 500, function () {
            // console.log("本次运动完毕");
            // if (index >= $(".dotBar li").length) {
            //     $(".slideBar").css({ left: 0 });
            //     index = 0;
            // }
        })
    })


    function autoPlay() {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var activeIndex = index >= $(".dotBar li").length ? 0 : index;
            $(".dotBar li").eq(activeIndex).addClass("active").siblings().removeClass("active");
            $(".slideBar").stop().animate({ left: -swiperWidth * index }, 500, function () {
                console.log("本次运动完毕");
                if (index >= $(".dotBar li").length) {
                    $(".slideBar").stop().css({ left: 0 });
                    index = 0;
                }
            })
        }, 3000)
    }




</script>

</html>